<template>
    <div id="app">

        <el-main>
            <!--搜索框-->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">

                <!--姓名-->
                <el-form-item label="姓名">
                    <el-input v-model="formInline.name" placeholder="姓名"></el-input>
                </el-form-item>
                <!--手机号-->
                <el-form-item label="电话">
                    <el-input v-model="formInline.phone" placeholder="电话"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="initTable()">查询</el-button>
                </el-form-item>
            </el-form>
            <!--展示框-->
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">

                <el-table-column
                        prop="id"
                        label="编号"
                        width="50">

                </el-table-column>
                <!-- 照片-->
                <el-table-column
                        prop="hardUrl"
                        label="照片"
                        width="150">
                    <template slot-scope="scope">
                        <img :src="scope.row.hardUrl" width="100" height="50"/>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="账号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证号"
                        width="180">
                </el-table-column>
<!--支部-->
                <el-table-column
                        prop="dept"
                        label="支部"
                        width="120">
                </el-table-column>

                <el-table-column
                        prop="education"
                        label="学历"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="时间"
                        width="180">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button @click="update(scope.row)" type="success">修改</el-button>
                        <el-button @click="del(scope.row)" type="danger">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
            <div style="padding: 10px 0">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </el-main>

        <!--修改-->
        <el-dialog
                title="修改"
                :visible.sync="dialogVisible"
                width="30%">

            <el-form label-width="80px" :model="editForm">

                <el-form-item label="姓名" prop="username">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="email">
                    <el-input v-model="editForm.account"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="editForm.idCard"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="dept">
                    <el-select v-model="editForm.branchId" placeholder="请选择">
                        <el-option
                                v-for="item in depts"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学历" prop="education">
                    <el-select v-model="editForm.education" placeholder="请选择">
                        <el-option
                                v-for="item in education"
                                :key="item.education"
                                :label="item.education"
                                :value="item.education">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="upda()">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "selectMember",
        data() {
            return{
                tableData: [],
                editForm: {},
                dialogVisible: false,
                education: [],
                depts:[],
                formInline:{},
                total: 0,
                currentPage: 1,
                pageSize: 5,
            }
        },
        //这个只会加载一次
        created() {
            this.initTable();
        },
        methods: {

            cancel(){
                this.dialogVisible = false
                this.initTable();
            },
            upda() {
                this.dialogVisible = false;
                this.$http.post("/system/admin/update", this.editForm).then(result => {
                    this.initTable();
                    if(result.data.code == 200){
                        this.$message.success(result.data.message);
                    }
                    else{
                        this.$message.error(result.data.message);
                    }
                })

            },

            //进入修改之前的操作
            update(e) {
                this.dialogVisible = true;
                this.editForm = e;
                this.edu();
                this.dept();
            },
            del(e){
                this.$http.get("/system/admin/deleteAdmin?id="+e.id).then(result=>{
                    this.initTable();
                    if(result.data.code == 200){
                        this.$message.success(result.data.message);
                    }
                    else{
                        this.$message.error(result.data.message);
                    }
                })
            },

            edu(){
                this.$http.get("/edu/list").then(result=>{
                    this.education = result.data.data;
                })
            },
            dept(){
                this.$http.get("/system/branch/list").then(result=>{
                    this.depts = result.data.data;
                })
            },
            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.initTable();
            },


            initTable() {
                this.$http.post("/system/admin/selectAdminAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.formInline).then(resp=>{
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
            },

        }
    }
</script>

<style scoped>
    html,body,#app{
        margin: 0px;
        padding: 0px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 500px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>